<template>
  <div>
    <h2 class="mb-4">安全设置</h2>
    <a-form :model="form" layout="vertical">
      <a-form-item label="当前密码" name="currentPassword">
        <a-input-password v-model:value="form.currentPassword" placeholder="请输入当前密码" />
      </a-form-item>
      <a-form-item label="新密码" name="newPassword">
        <a-input-password v-model:value="form.newPassword" placeholder="请输入新密码" />
      </a-form-item>
      <a-form-item label="确认新密码" name="confirmPassword">
        <a-input-password v-model:value="form.confirmPassword" placeholder="请再次输入新密码" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="handleChangePassword">修改密码</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { message } from 'ant-design-vue'

const form = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: '',
})

const handleChangePassword = () => {
  if (form.newPassword !== form.confirmPassword) {
    message.error('两次输入的密码不一致')
    return
  }
  // TODO: 实现修改密码功能
  message.success('密码修改成功')
}
</script>

<style scoped>
.mb-4 {
  margin-bottom: 16px;
}
</style>